﻿/// <reference path="CollapsiblePanel.js" />
//var i = new IM.Control.SideBar({
//    Render: $("#div1"),
//    Direction: "left",
//    CollapsedCallBack: function() { $("#right").css({ "width": $("#right").width() + 481 - 20, "position": "static" }); },
//    OnExpandCallBack: function() { $("#right").css({ "position": "absolute", "z-index": "-1", "left": 28 }); },
//    OnCollapseCallBack: function() { $("#right").css({ "position": "absolute", "z-index": "-1", "left": 481 }); },
//    ExpandedCallBack: function() { $("#right").css({ "width": $("#right").width() - 481 + 20, "position": "static" }); }
//});
//边角工具栏
IM.Control.SideBar = function(conf) {//
    IM.Control.Panel.apply(this, arguments);
    var _sidePanel; //侧边栏,在隐藏状态时用来点击弹出边栏
    var _collapsiblePanel; //可折叠的面版
    var _sideButton; //侧边栏上的按钮
    var _topButton; //顶部按钮
    var _topPanel; //顶部区域
    this.IsCollapsed = false;
    this.OnExpandCallBack; //展开前回调
    this.CollapsedCallBack; //关闭回调
    this.ExpandedCallBack; //展开回调
    this.OnCollapseCallBack; //关闭前回调
    this.Width;
    this.Height;
    this.Left;
    this.Top;

    //关闭侧边栏
    this.Collapse = function() {
        if (this.OnCollapseCallBack)
            this.OnCollapseCallBack();

        this.IsCollapsed = true; //设置关闭标记为关闭

        _sidePanel.show(); //显示边条按钮

        _collapsiblePanel.Render.css({ "position": "absolute", "left": _sidePanel.offset().left + _sidePanel.width(), "top": _sidePanel.offset().top });

        _sideButton.show();
        _topButton.hide();

        _collapsiblePanel.Hide(500, this.CollapsedCallBack);

        this.Width = _sidePanel.width();
        this.Height = _sidePanel.height();
        this.Left = _collapsiblePanel.Render.offset().left;
        this.Top = _collapsiblePanel.Render.offset().top;
    };

    //展开侧边栏
    this.Expand = function() {
        if (this.OnExpandCallBack)
            this.OnExpandCallBack();

        _collapsiblePanel.Render.unbind("mouseout");

        this.IsCollapsed = false; //设置关闭标记为展开

        var left = _sidePanel.offset().left;
        _sidePanel.css("display", "none"); //隐藏边条按钮
        _sideButton.hide();
        _topButton.show();
        this.Render.css({ "position": _sidePanel.css("position"), "left": left }); //恢复面版原来位置

        _collapsiblePanel.Show(500, this.ExpandedCallBack);

        this.Width = _collapsiblePanel.Original.width();
        this.Height = _sidePanel.height();
        this.Left = _collapsiblePanel.Render.offset().left;
        this.Top = _collapsiblePanel.Render.offset().top;
    };

    this.TempExpand = function() {//临时展开，在点击边条按钮时临时展开面版
        if (!this.IsCollapsed)//只有在侧边栏处于关闭状态时才能有临时展开
            return;

        this.Render.focus();
        _collapsiblePanel.Render.bind("mouseout",
        function(e) {
            IM.Mouse.Initial();
            var xx = IM.Mouse.Location.X; //鼠标当前座标
            var yy = IM.Mouse.Location.Y;

            if (xx <= _topPanel.offset().left + 2 || xx >= _topPanel.offset().left + _collapsiblePanel.Render.width() - 2 || yy <= _topPanel.offset().top + 2 || yy >= _collapsiblePanel.Render.offset().top + _collapsiblePanel.Render.height() - 2) {
                _collapsiblePanel.Hide(500);
                _collapsiblePanel.Render.unbind("mouseout");

            }
        }
        );
        _collapsiblePanel.Show(500);

        IM.SetInterval(500, 3000, null, //定时三秒钟，如果鼠标不在面版内则合闭
        function() {
            IM.Mouse.Initial();
            var xx = IM.Mouse.Location.X; //鼠标当前座标
            var yy = IM.Mouse.Location.Y;

            if (xx < _topPanel.offset().left || xx > _topPanel.offset().left + _topPanel.width() || yy < _topPanel.offset().top || yy > _collapsiblePanel.Render.offset().top + _collapsiblePanel.Render.height()) {
                _collapsiblePanel.Render.trigger("mouseout");
            }
        }
        );
    };

    this.BarInit = function() {
        _topPanel = $("<div></div>"); //创建顶部
        _topPanel.addClass("IM_SideTop"); //设置顶部样式

        _topButton = $("<div></div>"); //创建顶部按钮
        _topButton.addClass("IM_SideTop_Img IM_SideTop_Img_Expanded"); //设置顶部按钮样式
        this.Render.prepend(_topPanel); //将顶部加入到当前面版中
        _topPanel.append(_topButton); //将顶部按钮加入

        _sidePanel = $("<div></div>"); //创建右侧边条按钮
        _sidePanel.addClass("IM_SidePanel");
        _sidePanel.css({ "height": this.Render.height(), "position": this.Render.css("position"), "float": this.Render.css("float"), "clear": this.Render.css("clear"), "left": this.Render.offset().left, "top": this.Render.offset().top });
        _sidePanel.css({ "display": "none" });
        _sidePanel.insertBefore(this.Render)

        _collapsiblePanel = new IM.Control.CollapsiblePanel({ "Render": this.Render, Direction: "left" });
        _collapsiblePanel.Render.css({ "z-index": 500 });

        _sidePanel.bind("click", (function(obj) { return function() { obj.TempExpand(); }; })(this)); //绑定边栏按钮合闭事件
        _topButton.bind("click", (function(obj) { return function() { if (!obj.IsCollapsed) { obj.Collapse(); } else obj.Expand(); } })(this));

        _sideButton = _topButton.clone(true); //复制顶部按钮放在侧边栏
        _sideButton.removeClass("IM_SideTop_Img_Expanded");
        _sideButton.addClass("IM_SideTop_Img_Collapsed");

        _sidePanel.append(_sideButton);

        IM.Mouse.Initial();
    };
    this.BarInit();
};